<template>
  <div v-for="item in mockData" :key="item.id">
    <ReplayCommentItem :comment="item" />
  </div>
  <div class="list_notice">
    <div class="notice_more" v-if="isMore">加载更多</div>
    <div class="notice_no_more" v-if="!isMore">没有更多了</div>
  </div>
</template>

<script setup lang="ts">
  import ReplayCommentItem from './ReplayCommentItem.vue';
  import { ref } from 'vue';

  defineProps<{
    id: number;
  }>();

  const isMore = ref(false);
  const mockData = [
    {
      id: 12312213,
      username: '什锦1',
      avatar:
        '//sf1-cdn-tos.bdxiguastatic.com/img/user-avatar/e2580b2bb3d06dc4b805488ea57a8e0a~80x80.image',
      createTime: '2020-7-12',
      commentContent: '作者我给你99怕你多了一分，你我怕你骄傲。',
      thumbsUpCount: 5,
      replayCount: 2,
      isAgree: true,
    },
    {
      id: 12312213,
      username: '什锦2',
      avatar:
        '//sf1-cdn-tos.bdxiguastatic.com/img/user-avatar/e2580b2bb3d06dc4b805488ea57a8e0a~80x80.image',
      createTime: '2020-7-12',
      commentContent: '作者我给你99怕你多了一分，你我怕你骄傲。',
      thumbsUpCount: 5,
      replayCount: 2,
      isAgree: false,
    },
    {
      id: 12312213,
      username: '什锦3',
      avatar:
        '//sf1-cdn-tos.bdxiguastatic.com/img/user-avatar/e2580b2bb3d06dc4b805488ea57a8e0a~80x80.image',
      createTime: '2020-7-12',
      commentContent: '作者我给你99怕你多了一分，你我怕你骄傲。',
      thumbsUpCount: 5,
      replayCount: 2,
      isAgree: false,
    },
    {
      id: 123122134,
      username: '什锦4',
      avatar:
        '//sf1-cdn-tos.bdxiguastatic.com/img/user-avatar/e2580b2bb3d06dc4b805488ea57a8e0a~80x80.image',
      createTime: '2020-7-12',
      commentContent: '作者我给你99怕你多了一分，你我怕你骄傲。',
      thumbsUpCount: 5,
      replayCount: 2,
      isAgree: false,
    },
  ];
</script>

<style lang="scss" scoped>
  .list_notice {
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;

    .notice_more {
      padding: 5px 10px;
      border: 1px solid #b1bfc9;
      border-radius: 10px;
      cursor: pointer;
    }

    .notice_no_more {
      padding: 5px 10px;
      color: #f57a7a;
    }
  }
</style>
